<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

    <body>
        <div class="div_btn"><button id="btn" onclick="window.location.href='/'">返回首页</button></div>
        
        <div class="div"><button  onclick="daley_queue()">发布延时队列任务</button></div>
        <div class="div"><button  onclick="priority_queue()">发布优先队列任务</button></div> 
        <div class="div"><button  onclick="daley_queue_work()">php artisan queue:work</button></div> 
        <div class="div"><button  onclick="priority_queue_work()">php artisan queue:work --queue=B,A,default</button></div>
        <div class="div"><button  onclick="stop_queue_work()">队列任务消费终止：</button></div>   
        
        <hr/>
        <div>
            <div>当前队列中的任务key列表:</div>
            <div id="keys-container"></div> <!-- 添加一个容器来显示键 -->
        </div>
         
    </body>

   <script type="text/javascript">
        window.onload = function(){
            //加载时先获取redis中前20的key
            get_keys();
        }
        //查询当前redis中前20的key
        function get_keys(){
            
            ajaxRequest('queue_keys','get',null,function(data){
                if(data.code == 200){
                    displayKeys(data.data);
                }else{
                    displayKeys([]);
                }
            });
        }
         // 显示键的函数
         function displayKeys(keys) {
            var keysContainer = document.getElementById('keys-container');
            keysContainer.innerHTML = ''; // 清空容器

            if (keys.length > 0) {
                keys.forEach(function(key) {
                    var keyElement = document.createElement('div');
                    keyElement.textContent = key;                  
                    keysContainer.appendChild(keyElement);
                });
            } else {
                keysContainer.textContent = 'No keys found';
            }
        }
        
        function daley_queue(){
            var data = {
                key: 'delay_queue',
                value: 'hello world!',
                delay: 10,
            };
            ajaxRequest('delay_queue', 'POST', data, function(response) {
                if (response.code == 200) {
                    alert(response.msg);
                    get_keys();
                } else {
                    alert(response.msg);
                }
            });
        }
        function priority_queue(){
            var data = {
                key: 'priority_queue',
                value: 'hello world!',
                priority: 1
            };
            ajaxRequest('priority_queue', 'POST', data, function(response) {
                if (response.code == 200) {
                    alert(response.msg);
                    get_keys();
                } else {
                    alert(response.msg);
                }
            });
        }

        //队列任务消费启动
        function priority_queue_work(){
            ajaxRequest('priority_queue_work','post',null,function(response){
                if (response.code == 200) {
                    alert(response.msg);
                    get_keys();
                } else {
                    alert(response.msg);
                }
            });
        }

        function daley_queue_work(){
            ajaxRequest('daley_queue_work','post',null,function(response){
                if (response.code == 200) {
                    alert(response.msg);
                    get_keys();
                } else {
                    alert(response.msg);
                }
            });
        }

        //队列任务消费启动终止
        function stop_queue_work(){
            ajaxRequest('stop_queue_work','get',null,function(response){
                if (response.code == 200) {
                    alert(response.msg);
                } else {
                    alert(response.msg);
                }
            });
        }

        
        //原生Ajax请求定义

        function ajaxRequest(url, method, data, callback) {  

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 定义请求的类型、URL以及是否异步处理
            xhr.open(method, url, true);

            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            //laravel框架需要设置csrf 防渗透验证
            var csr = document.getElementsByName('csrf-token')[0].getAttribute('content');
            xhr.setRequestHeader('X-CSRF-TOKEN', csr);

            // 定义请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    console.log( xhr.responseText);
                                       
                    callback(JSON.parse(xhr.responseText));
                } else {
                    // 请求失败，处理错误
                    console.error('Request failed with status:', xhr.status);
                }
            };

            // 定义请求出错时的回调函数
            xhr.onerror = function () {
                console.error('Request failed');
            };
            
            // 发送请求，将数据转换为JSON格式
            xhr.send(JSON.stringify(data));

        }
        
   </script> 
    <style>
        #btn {
            position: absolute; /* 绝对定位 */
            right: 20px; /* 距离右侧 20px */
        }
        .div {
            margin: 10px; /* 设置外边距为 2px */
        }
        .div_btn{
            height: 10px;
        }
    </style>

</html>



